<template>
	<view class="containner">
		<view class="totalPoints">
			<view class="totalPointsTip">
				<text>我的积分</text>
				<view style="float: right;" @click="goRule">积分规则<u-icon name="info-circle" color="#999" size="28"></u-icon></view>
			</view>
			<view class="totalPoint">
				<text>{{point}}</text>
				<text class="btn" @click="goStroe">{{'去兑换'}}</text>
			</view>
		</view>
		<view class="pointsDetail">
			<view class="detailsItem" v-for="(item,index) in pointlist" :key="index">
				<view class="Item">
					<view class="">{{item.remark}}</view>
					<view class="timer">{{item.crtime}}</view>
				</view>
				<view :class="item.points>0?'add':'minus'">{{item.points>0?('+' + item.points):(item.points)}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getpointInfo,getAccountInfo } from '@/api/user.js'
	export default {
		data() {
			return {
				barStyle:{
					backgroundColor:'#01a90c'
				},
				pointlist:[],
				point:0
			};
		},
		mounted() {
			this.init()
		},
		methods: {
			init(){
				let that = this
				getAccountInfo().then(res=>{
					that.point = res.data.points
				})
				getpointInfo().then(res=>{
					that.pointlist = res.list;
				})
			},
			// 积分商城
			goStroe(){
				uni.navigateTo({
					url:'/page/pointStore/index'
				})
			},
			goRule(){
				uni.navigateTo({
					url:'/other/point-rule/point-rule'
				})
			}
		}
	}
</script>
<style lang="scss">
	.containner{
		background-color: #f2f2f2;
		padding: 20upx 20upx 0;
	}
.totalPoints{
	height: 200upx;
	border-radius: 10upx;
	background-color: #fff;
	margin-bottom: 20upx;
	.totalPointsTip{
		display: flex;
		justify-content: space-around;
		padding: 30upx;
	}
	.totalPoint{
		font-size: 40upx;
		font-weight: 500;
		margin-left: 130upx;
		.btn{
			background: #6BC665;
			border-radius: 25px;
			color: #fff;
			font-size: 24upx;
			padding: 10upx 13upx;
			margin-left: 50upx;
		}
	}
}
.pointsDetail{
	background-color: #fff;
	padding: 0 20upx;
	.detailsItem{
		display: flex;
		justify-content: space-between;
		border-bottom: #EDEDED 1upx solid;
		padding: 30upx 0;
	}
	.timer{
		font-size: 22upx;
		color: #666;
	}
	.add{
		font-size: 28upx;
		color: #FF3B30;
	}
	.minus{
		color: #01A90C;
		font-size: 28upx;
	}
}
</style>